<template>
	<view class="container" :style="{paddingTop: `${getSystemInfo.navBarHeight}px`}">

		<navBar title="卡友家园" @back="handleBack" />

		<!-- 轮播 -->
		<view class="swiper-content">
			<swiper class="swiper" circular autoplay indicator-dots :interval="3000">
				<swiper-item v-for="(item, index) in swiperData" :key="item.id">
					<view class="swiper-item" @click="handleSwiper(item, index)">
						<image :src="item.adImage" mode="scaleToFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="info-content">
			<!-- 法律援助、教育援助 -->
			<view class="aid-content" v-if="aidData.length">
				<view class="ac-item" v-for="item in aidData" :key="item.id" @click="handleAid(item)">
					<image :src="item.itemClassImg" mode=""></image>
				</view>
				<!-- 占位符 -->
				<view class="ac-item" v-if="aidData.length === 1">
					<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/care/qidai.png"
						mode=""></image>
				</view>
				<!-- <view class="ac-item">
					<view class="aci-top">
						<view class="acit-left">法律援助</view>
						<view class="acit-right"> &gt; </view>
					</view>
					<view class="aci-mid">
						全国
					</view>
					<view class="aci-btm">
						<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/care/ic_lv1.png" mode=""></image>
						知名律师
					</view>
				</view>
				<view class="ac-item">
					<view class="aci-top">
						<view class="acit-left">教育援助</view>
						<view class="acit-right"> &gt; </view>
					</view>
					<view class="aci-mid">
						知名专家 <text class="color-text">5分钟</text>回复
					</view>
					<view class="aci-btm">
						<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/care/ic_lv.png" mode=""></image>
						卡友子女教育
					</view>
				</view> -->
			</view>

			<!-- 大咖说 -->
			<view class="video-content" v-if="videoData.length">
				<view class="info-title">
					<view class="it-left">大咖说</view>
					<view class="it-right" @click.stop="handleVideoList">更多 &gt; </view>
				</view>

				<view class="vc-box">
					<video v-for="(item,index) in videoData" :key="item.id" :src="item.video" object-fit="cover"
						:poster="item.coverVideo && item.coverVideo.length ? item.coverVideo : null" :controls="false"
						:show-center-play-btn="false" :show-play-btn="false" :show-fullscreen-btn="false"
						@click.stop="handleVideo(item,index)" />
				</view>
			</view>
		</view>

		<!-- 卡友新闻 -->
		<view class="info-title title-color" v-if="msgData.length">
			<view class="it-left">卡友新闻</view>
			<view class="it-right" @click.stop="handleNewsConsult">更多 &gt; </view>
		</view>
		<view class="msg-content" v-if="msgData.length">
			<view class="mc-item" v-for="item in msgData" :key="item.id" @click="handleMsgDetail(item.id)">
				<view class="mci-left">
					<view class="mcil-title">{{ item.articleTitle || ''}}</view>
					<view class="mcil-info">{{ item.briefIntroduction || ''}}</view>
					<view class="mcil-btm">
						<view class="mcilb-desc">
							<view class="mcilbr-icon">
								<image
									src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/care/ic_read.png"
									mode=""></image>
							</view>
							{{ item.viewQuantity || 0}}阅读
						</view>
						<view class="mcilb-desc">
							<view class="mcilbr-icon">
								<image
									src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/care/ic_time.png"
									mode=""></image>
							</view>
							{{ item.publishTime }}
						</view>
					</view>
				</view>
				<view class="mci-right">
					<image :src="item.coverImage" mode=""></image>
				</view>
			</view>
		</view>

		<!-- 我的咨询 -->
		<view class="leaveMsg-content" @click.stop="handleLeaveMsg">
			我的<br>咨询
		</view>

	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import {
		mapGetters
	} from 'vuex'

	export default {
		components: {
			navBar
		},
		data() {
			return {
				swiperData: [],
				aidData: [],
				videoData: [],
				msgData: [],
			}
		},
		computed: {
			...mapGetters('global', ['getSystemInfo']),
			...mapGetters('user', ['getUserInfo']),
		},
		onLoad() {
			 //判断来自哪个页面
			this.getSwiperData()
			this.getAidData()
			this.getVideoData()
			this.getMsgData()
		},
		methods: {
			handleBack() {
				let source = uni.getStorageSync('careAuth')
				source = source ? source : 'mine'
				if (source == 'mine') {
					uni.switchTab({
						url: '/pages/mine/home'
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index/index'
					})
				}
			},
			handleVideo(data, index) {
				uni.navigateTo({
					url: `/videoPack/videoDetail/index?id=${data.id}&source=care&currentIndex=${index}`
				});
			},
			handleAid(data) {
				uni.navigateTo({
					url: `/carePack/aid/index?itemType=${data.itemType}&itemId=${data.id}`
				})
			},
			handleLeaveMsg() {
				uni.navigateTo({
					url: `/carePack/leaveMessage/index`
				})
			},
			handleVideoList() {
				uni.navigateTo({
					url: `/videoPack/videoList/index`
				})
			},
			handleNewsConsult() {
				uni.navigateTo({
					url: `/carePack/index/newsConsult`
				})
			},
			handleMsgDetail(id) {
				uni.navigateTo({
					url: `/carePack/index/articleDetail?id=${id}`
				})
			},
			handleSwiper(item, index) {
				// 第一个需要跳转至二期小程序
				if (index === 0) {
					uni.navigateToMiniProgram({
						appId: 'wx1c1f4a0c410b85ed',
						path: '/pages/loveAssistance/home/index'
					})
				} else {
					// 跳转至文章内部
					if (item.jumpType === 1) {
						uni.navigateTo({
							url: `/indexPack/article/article?articleId=${item.articleId}`
						})
					}
				}
			},
			// 获取卡友新闻
			async getMsgData() {
				const res = await this.$request({
					method: 'POST',
					url: '/marketing-center/article/app/list',
					data: {
						pageNum: 1,
						pageSize: 15,
					}
				})
				this.msgData = res.datas.data
			},
			// 获取大咖说
			async getVideoData() {
				const res = await this.$request({
					method: 'POST',
					url: '/terminal-serve-center/app/cars/getLoveItemVideo',
					data: {
						userId: this.getUserInfo.id
					}
				})
				this.videoData = res.datas
			},
			// 获取援助信息
			async getAidData() {
				const res = await this.$request({
					method: 'GET',
					url: '/ltb-center/loveitem/app/getPublishItemList',
				})
				this.aidData = res.datas
			},
			// 获取轮播图
			async getSwiperData() {
				const res = await this.$request({
					method: 'GET',
					url: '/marketing-center/ad/list-by-position',
					data: {
						positionCode: 'AD20230222002'
					}
				})
				this.swiperData = res.datas
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		box-sizing: border-box;
		overflow: hidden;

		// 轮播图
		.swiper-content {
			swiper {
				height: 210px;
			}

			.swiper-item,
			image {
				height: 100%;
				width: 100%;
			}
		}

		// 中部信息
		.info-content {
			margin-top: -14rpx;
			background-color: #fff;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			border-radius: 24rpx 24rpx 0 0;
			position: relative;
			z-index: 1;

			.aid-content {
				height: 100%;
				display: flex;
				gap: 22rpx;

				.ac-item {
					// &:nth-child(1) {
					// 	background: url('https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/care/falv.png') no-repeat;
					// 	background-size: cover;
					// 	.acit-right, .aci-btm {
					// 		background-color: #F05A5C;
					// 	}
					// }
					// &:nth-child(2) {
					// 	background: url('https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/care/jiaoyu.png') no-repeat;
					// 	background-size: cover;
					// 	.acit-right, .aci-btm {
					// 		background-color: #FE9139;
					// 	}
					// 	.color-text {
					// 		color: #FE9139;
					// 		margin: 0 6rpx;
					// 	}
					// }
					width: 50%;
					box-sizing: border-box;

					// height: 120px;
					// padding: 36rpx 28rpx 38rpx;
					// display: flex;
					// flex-direction: column;
					// justify-content: space-between;
					image {
						width: 344rpx;
						height: 240rpx;
					}

					// .aci-top {
					// 	display: flex;
					// 	justify-content: space-between;
					// 	align-items: center;
					// 	.acit-left {
					// 		font-size: 18px;
					// 		text-shadow: 0 0 0.1px currentColor;
					// 	}
					// 	.acit-right {
					// 		width: 32rpx;
					// 		height: 32rpx;
					// 		border-radius: 50%;
					// 		color: #fff;
					// 		// text-align: center;
					// 		// line-height: 32rpx;
					// 		display: flex;
					// 		justify-content: center;
					// 		align-items: center;
					// 	}
					// }
					// .aci-mid {
					// 	font-size: 14px;
					// 	color: #999;
					// }
					// .aci-btm {
					// 	border-radius: 24rpx;
					// 	box-sizing: border-box;
					// 	padding: 8rpx 24rpx;
					// 	color: #fff;
					// 	display: flex;
					// 	align-items: center;
					// 	font-size: 13px;
					// 	image {
					// 		width: 26rpx;
					// 		height: 28rpx;
					// 		margin-right: 10rpx;
					// 	}
					// }
				}
			}
		}

		// 标题
		.info-title {
			padding: 24rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.it-left {
				font-size: 17px;
				text-shadow: 0 0 0.1px currentColor;
			}

			.it-right {
				font-size: 13px;
				color: #999;
			}
		}

		// 大咖说
		.video-content {
			.vc-box {
				display: flex;
				gap: 22rpx;
				height: 394rpx;

				video {
					width: 33%;
					height: 100%;
				}
			}
		}

		.title-color {
			background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
			padding: 0 20rpx 24rpx;
		}

		.msg-content {
			padding: 0 20rpx;
			box-sizing: border-box;

			.mc-item {
				// &:not(:nth-last-child(1)){
				margin-bottom: 24rpx;
				// }
				box-sizing: border-box;
				padding: 20rpx;
				border-radius: 8rpx;
				display: flex;
				justify-content: space-between;
				background-color: #fff;

				.mci-left {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.mcil-title {
						font-size: 16px;
						color: #333;
						text-shadow: 0 0 0.1px currentColor;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
					}

					.mcil-info {
						margin: 8rpx 0 16rpx;
						font-size: 13px;
						color: #666;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}

					.mcil-btm {
						font-size: 11px;
						color: #999;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.mcilb-desc {
							display: flex;
							align-items: center;

							.mcilbr-icon {
								margin-right: 8rpx;

								image {
									width: 20rpx;
									height: 20rpx;
								}
							}
						}
					}
				}

				.mci-right {
					margin-left: 20rpx;

					image {
						width: 220rpx;
						height: 160rpx;
						border-radius: 8rpx;
					}
				}
			}
		}

		.leaveMsg-content {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: #CF1A1B;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(207, 26, 27, 0.3);
			font-size: 13px;
			color: #FFFFFF;
			text-shadow: 0 0 0.1px currentColor;
			position: fixed;
			right: 40rpx;
			bottom: 40rpx;
			z-index: 9;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			padding: 14rpx 22rpx;
			box-sizing: border-box;
			overflow: hidden;
		}

	}
</style>